<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <h:form id="incomeCreate" enctype="multipart/form-data">
                <h1 class="title">
                    <a href="#" class="back" onclick="history.go(-1)"/>
                    Editar Modelo
                </h1>
                <p:messages showDetail="true" autoUpdate="true"  /> 
                <div class="row">
                    <div class="twelve columns">
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Dados</h4></legend>
                            <p:panel id="resultPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix " >

                                <p:outputLabel for="name" value="Nome: " styleClass="grid_3"/> 
                                <p:inputText id="name" styleClass="grid_19" 
                                             value="#{managerSearchTemplateAppraisal.editTemplateAppraisal.name}"/>

                                <p:outputLabel for="pojoPickList" value="Procedimento: " styleClass="grid_3"/> 

                                <p:pickList id="pojoPickList" value="#{managerSearchTemplateAppraisal.listModel}" 
                                            var="procedure" style="width:80%; padding-left: 7px;"
                                            itemValue="#{procedure}" itemLabel="#{procedure.name}" 
                                            converter="procedureconverter"  
                                            showCheckbox="true" 
                                            showSourceFilter="true" showTargetFilter="true" 
                                            filterMatchMode="contains" >  

                                    <f:facet name="sourceCaption">Procedimentos</f:facet>  
                                    <f:facet name="targetCaption">Selecionados</f:facet>  

                                    <p:column style="width:100%;max-width: 150px;">  
                                        <h:outputText  value="#{procedure.cod}-#{procedure.name}" 
                                                       style="white-space: pre-wrap; "/>
                                    </p:column>  

                                </p:pickList>


                            </p:panel>


                            <p:tabView id="tabview">
                                <p:tab id="tab1" title="Texto Geral">
                                    <fieldset>
                                        <legend> <h4 style="margin:0 0 10px 0">Texto</h4></legend>
                                        <p:editor value="#{managerSearchTemplateAppraisal.editTemplateAppraisal.textModel}"/>

                                    </fieldset>
                                </p:tab>
                                <p:tab rendered="true" id="tab2" title="Categorias">
                                    <fieldset>
                                        <legend> <h4 style="margin:0 0 10px 0">Adicionar Categorias</h4></legend>

                                        <p:panel id="panelCategory" style="background: none; border: none;  max-height: 500px;" 
                                                 styleClass="container_24 clearfix " >

                                            <p:outputLabel  value="Ordem:" styleClass="grid_2"/> 
                                            <p:inputText id="ordem"  value="#{managerSearchTemplateAppraisal.category.ordem}" styleClass="grid_1"/> 

                                            <p:outputLabel  value="Nome: " styleClass="grid_2"/> 
                                            <p:inputText  styleClass="grid_13"
                                                          value="#{managerSearchTemplateAppraisal.category.titulo}"/>

                                            <p:selectBooleanCheckbox styleClass="grid_1"  
                                                                     value="#{managerSearchTemplateAppraisal.category.omitirTitulo}" label="Omitir Titulo" />
                                            <h:outputText  value="Omitir Titulo" styleClass="grid_4"/>
                                            <div class="clear"/> 


                                            <fieldset>
                                                <legend> <h4 style="margin:0 0 10px 0">Itens</h4></legend>
                                                <p:panel id="panelItem" style="background: none; border: none;" 
                                                         styleClass="container_24 clearfix " >

                                                    <div class="grid_24">
                                                        <p:outputLabel  value="Padrão:" styleClass="grid_3"/>
                                                        <p:selectBooleanCheckbox styleClass="grid_2"  value="#{managerSearchTemplateAppraisal.item.itemDefault}" 
                                                                                 label="Padrão" />

                                                        <p:outputLabel  value="Ordem:" styleClass="grid_2"/> 
                                                        <p:inputText id="ordemitem"  value="#{managerSearchTemplateAppraisal.item.ordem}" 
                                                                     styleClass="grid_3"/> 

                                                        <p:outputLabel value="Tipo:" styleClass="grid_2" /> 
                                                        <div class="grid_9">
                                                            <p:selectOneMenu style="width: 80%;" panelStyle="width:150px;" 
                                                                             value="#{managerSearchTemplateAppraisal.item.typeItem}" > 
                                                                <f:selectItem  itemValue="#{null}" itemLabel="Selecione o Tipo"/>
                                                                <f:selectItems value="#{managerSearchTemplateAppraisal.selectTypeItem()}" />
                                                            </p:selectOneMenu>
                                                        </div>

                                                        <div class="clear"/>
                                                        <p:outputLabel  value="Título: " styleClass="grid_3"/> 
                                                        <p:inputText label="Título" styleClass="grid_18" 
                                                                     value="#{managerSearchTemplateAppraisal.item.titulo}"/>

                                                        <div class="clear"/>
                                                        <p:outputLabel  value="Descrição: " styleClass="grid_3"/> 
                                                        <p:inputTextarea autoResize="false"  styleClass="grid_18" cols="50" rows="2" 
                                                                         value="#{managerSearchTemplateAppraisal.item.descricao}"/>


                                                        <div class="clear"/>

                                                        <div class="buttonAction">
                                                            <p:commandButton value="Adicionar Item" icon="ui-icon-plus" style="width: 200px;"
                                                                             actionListener="#{managerSearchTemplateAppraisal.addItemCategory()}"
                                                                             process="@this, :incomeCreate:tabview:panelItem" update="@this, :incomeCreate:tabview:panelItem"/>
                                                        </div>
                                                    </div>

                                                    <p:dataTable id="tableItem" var="in" value="#{managerSearchTemplateAppraisal.items}" 
                                                                 styleClass="grid_24"
                                                                 rowIndexVar="rowid"
                                                                 rowKey="#{r.id}"
                                                                 rows="3" paginator="true"  
                                                                 paginatorPosition="bottom"
                                                                 emptyMessage="Nenhum registro">  
                                                        <f:facet name="header">
                                                            Itens
                                                        </f:facet>

                                                        <p:column headerText="Ações" width="300" style="white-space: pre-wrap;">  

                                                            <p:commandButton
                                                                icon="ui-icon-pencil" alt="Alterar Item" title="Alterar Item"
                                                                style="width: 30px; position: relative;"
                                                                actionListener="#{managerSearchTemplateAppraisal.editItem(rowid)}"
                                                                update="@this, :incomeCreate:tabview:panelItem" process="@this"/>


                                                            <p:commandButton
                                                                icon="ui-icon-trash" alt="Remover Item" title="Remover Item"
                                                                style="width: 30px; position: relative;"
                                                                actionListener="#{managerSearchTemplateAppraisal.removerItem(rowid)}"
                                                                update="@this, :incomeCreate:tabview:panelItem" process="@this, :incomeCreate:tabview:panelItem" />
                                                        </p:column>  
                                                        <p:column headerText="#" width="100" style="white-space: pre-wrap;">  
                                                            <h:outputText value="#{in.ordem}"/>
                                                        </p:column>  
                                                        <p:column headerText="Tipo" width="400" style="white-space: pre-wrap;">  
                                                            <h:outputText value="#{in.typeItem.desc}"/>
                                                        </p:column>  
                                                        <p:column headerText="Titulo" style="white-space: pre-wrap;" width="400">  
                                                            <h:outputText value="#{in.titulo.length() gt 50 ? 
                                                                                   (in.titulo.substring(0, 50).concat('...')) : in.titulo}"/>

                                                        </p:column>  
                                                        <p:column headerText="Descricao" style="white-space: pre-wrap;"> 
                                                            <h:outputText value="#{in.descricao.length() gt 50 ? 
                                                                                   (in.descricao.substring(0, 50).concat('...')) : in.descricao}"/>
                                                        </p:column>  

                                                    </p:dataTable>


                                                </p:panel>
                                            </fieldset>

                                            <div class="buttonAction">
                                                <p:commandButton value="Atualizar" icon="ui-icon-disk"
                                                                 actionListener="#{managerSearchTemplateAppraisal.addCategory()}"
                                                                 process="@this, :incomeCreate:tabview:panelCategory" 
                                                                 update="@this, :incomeCreate:tabview:panelCategory, :incomeCreate:tabview:tableResumo"
                                                                 styleClass="ui-priority-primary" />
                                                <p:commandButton value="Cancelar" icon="ui-icon-close"
                                                                 process="@form" update="@form"/>
                                            </div>
                                        </p:panel>

                                    </fieldset>
                                    <br/>
                                    <div class="clear"/>
                                    <p:dataTable id="tableResumo" var="cat" value="#{managerSearchTemplateAppraisal.categorys}" 
                                                 styleClass="grid_24"
                                                 rowIndexVar="rowidcat"
                                                 rowKey="#{cat.id}"
                                                 rows="15" paginator="true"  
                                                 paginatorPosition="bottom"
                                                 emptyMessage="Nenhum registro"
                                                 >  
                                        <f:facet name="header">
                                            Resumo
                                        </f:facet>
                                        <p:column headerText="Excluir" width="70" style="white-space: pre-wrap;">  
                                            <p:commandButton
                                                icon="ui-icon-pencil" alt="Alterar Categoria" title="Alterar Categoria"
                                                style="width: 30px; position: relative;"
                                                actionListener="#{managerSearchTemplateAppraisal.editCategory(rowidcat)}"
                                                update="@this, :incomeCreate:tabview:panelCategory" process="@this"/>

                                            <p:commandButton
                                                icon="ui-icon-trash" alt="Remover Item" title="Remover Item"
                                                style="width: 30px; position: relative;"
                                                actionListener="#{managerSearchTemplateAppraisal.removerCategory(rowidcat)}"
                                                update="@this, :incomeCreate:tabview:tableResumo" process="@this, :incomeCreate:tabview:tableResumo" />

                                        </p:column> 
                                        <p:column headerText="Ordem" style="white-space: pre-wrap;" width="50">  
                                            <h:outputText value="#{cat.ordem} "/>
                                        </p:column>  
                                        <p:column headerText="Categoria" style="white-space: pre-wrap;" width="400">  
                                            <h:outputText value="#{cat.titulo}"/>
                                        </p:column>  
                                        <p:column headerText="Itens" width="400" style="white-space: pre-wrap;">  
                                            <ui:repeat value="#{managerSearchTemplateAppraisal.itemsByCategory(rowidcat)}" var="ci">
                                                <h:outputText value="#{ci.ordem} - #{ci.titulo}"/><br/>
                                            </ui:repeat>
                                        </p:column>  

                                    </p:dataTable>


                                </p:tab>
                            </p:tabView>



                            <div class="buttonAction">
                                <p:commandButton value="Salvar" icon="ui-icon-disk"
                                                 process="@form" update="@form"
                                                 actionListener="#{managerSearchTemplateAppraisal.edit()}"
                                                 styleClass="ui-priority-primary" />


                                <p:commandButton value="Cancelar" icon="ui-icon-close"
                                                 process="@form" update="@form"/>
                            </div>
                        </fieldset>


                    </div>
                </div>

            </h:form>
        </ui:define>
    </ui:composition>

</html>
